<template>
  <div>
    <el-row :gutter="5">
      <el-col :span="8">
        <el-button style="float: right;margin-bottom:5px;" @click="openEdit" type="primary" size="small"><i
          class="el-icon-plus"></i>新增类型
        </el-button>
        <el-table
          stripe
          :data="dictTypeList"
          highlight-current-row
          @current-change='handleRowHandle'
          border>
          <el-table-column
            inline-template
            label=""
            width="70"
            align="center">
            <span>
            <el-radio :label="row.id" v-model="form.dict_type_id">{{$index+1}}</el-radio>
            </span>
          </el-table-column>
          <el-table-column
            label="名称"
            prop="name"
            align="center">
          </el-table-column>
          <el-table-column
            label="KEY"
            prop="dictKey"
            align="center">
          </el-table-column>
          <el-table-column
            label="操作"
            align="right"
            inline-template
            width="80">
            <template>
              <i class="aui-iconfont aui-icon-edit green pointer" @click="openEdit(row.id)"></i>
              <el-popover
                ref="popover_"
                placement="top">
                <p><i class="el-alert__icon el-icon-warning red"></i>确定要删除此数据项吗？<br>删除后将无法恢复！</p>
                <div style="text-align: right; margin: 0">
                  <el-button type="primary" size="mini" @click.native.prevent="deletetype(row.id);">确定</el-button>
                </div>
              </el-popover><i class="el-icon-delete red pointer" v-popover:popover_></i>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="16">
        <el-button style="float: right;margin-bottom:5px;" type="primary" v-if="dictTypeTitle!=''" size="small" @click="openEditDialog"><i
          class="el-icon-plus"></i>新增【{{dictTypeTitle}}】数据
        </el-button>
        <el-table
          stripe
          :data="list"
          border>
          <el-table-column :label="'【'+(dictTypeTitle?dictTypeTitle:'')+'】的字典明细'">
            <el-table-column
              inline-template
              label="序号"
              width="80"
              align="center">
              <span>{{$index+1}}</span>
            </el-table-column>
            <el-table-column
              label="名称"
              prop="name"
              align="left">
            </el-table-column>
            <el-table-column
              label="值"
              prop="val"
              align="left">\
            </el-table-column>
            <el-table-column
              inline-template
              label="状态"
            >
              <span :class="{'red':row.active==0}">
                {{active[row.active]}}
              </span>
            </el-table-column>
            <el-table-column
              label="操作"
              align="right"
              inline-template
              width="150">
              <template>
                <el-button type="text" @click.native.prevent="openSonDialog(row)">添加子项</el-button>
                <i class="aui-iconfont aui-icon-edit green pointer" @click="openEditDialog(row.id)"></i>
                <el-popover
                  ref="popover_"
                  placement="top">
                  <p><i class="el-alert__icon el-icon-warning red"></i>确定要删除此数据项吗？<br>删除后将无法恢复！</p>
                  <div style="text-align: right; margin: 0">
                    <el-button type="primary" size="mini" @click.native.prevent="deletedict(row.id);row.p=false">确定</el-button>
                  </div>
                </el-popover><i class="el-icon-delete red pointer" v-popover:popover_></i>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!--弹出框-->
    <dict-add-dialog v-bind:dialog-form-visible="dialogData.show" v-bind:parent="parent"
                     v-on:closeDialog="closeDialog"></dict-add-dialog>
    <type-add-dialog v-bind:dialog-form-visible="typeData.show" v-bind:parent="parent"
                     v-on:closeDialog="closetypeDialog"></type-add-dialog>
  </div>
</template>
<script>
  import dictAddDialog from './add.dialog.vue'
  import typeAddDialog from './addtype.dialog.vue'
  import http from '../../../api/http'
  export default {
    data () {
      return {
        dictTypeTitle:'',
        loading: true,
        parent: {},//父级
        form: {
//          filter: {kwd: '', fieldList:[{field:'dict_type_id',exp:'=',val:null}]},
          dict_type_id:'',
          pageNo: 1,
          pageSize: 10
        }, active: ["禁用", "启用"],
        id: null,
        dialogData: {show: false},
        typeData: {show: false},
        list: [],
        dictTypeList:[],
        dialogFormVisible: false
      }
    },
    computed: {},
    methods: {
      onSubmit () {
        var vm = this;
        vm.loading = true;
        http.postData(vm,"/sys/dict/list", {
//          json: JSON.stringify(vm.form.filter),
          dict_type_id:vm.form.dict_type_id,
          pageNo: vm.form.pageNo,
          pageSize: vm.form.pageSize
        },function (resp) {
          var ret = resp.body;
          if (ret.code == '111') {
            vm.list = ret.value;
          }
          vm.loading = false;
        });
      },
      openEditDialog(id_) {
        this.$set(this.dialogData, 'show', true);
        if (id_ != undefined && typeof id_ == "string") {
          this.id = id_;
        } else {
          this.id = '';
        }
        this.parent = {};
      },
      openSonDialog(row){
        this.$set(this.dialogData, 'show', true);
        this.id = undefined;
        this.parent = row;
      },
      openEdit(id_){
        this.$set(this.typeData, 'show', true);
        if (id_ != undefined && typeof id_ == "string") {
          this.id = id_;
        } else {
          this.id = '';
        }
        this.parent = {};
      },
      handleRowHandle(row, event, column){
        var vm = this;
        if(row!=undefined) {
          vm.form.dict_type_id = row.id;
          vm.dictTypeTitle = row.name
          vm.onSubmit();
        }
      },
      loadData(func) {
          var vm=this;
        if (this.id != undefined && this.id != '') {
          http.postData(vm,"/sys/dict/detail/" + this.id, {},function (resp) {
            var ret = resp.body;
            if (ret.code === '111') {
              func(ret.value);
            } else {
              vm.$notify.error({title: '操作失败', message: ret.msg});
            }
          });
        } else {
          func({active: 1, name: '', parentId: this.parent.id, lvl: this.parent.lvl + 1});
        }
      },
      loadtypeData(func) {
          var vm=this;
        if (vm.id != undefined && vm.id != '') {
          http.postData(vm,"/sys/dict/detailType/" + vm.id, {},function (resp) {
            var ret = resp.body;
            if (ret.code === '111') {
              func(ret.value);
            } else {
              vm.$notify.error({title: '操作失败', message: ret.msg});
            }
          });
        } else {
          func({active: 1, name: '', parentId: vm.parent.id, lvl: this.parent.lvl + 1});
        }
      },
      closeDialog() {
        this.$set(this.dialogData, 'show', false);
      },
      closetypeDialog() {
        this.$set(this.typeData, 'show', false);
      },
      deletedict (id) {
        var vm = this;
        http.postData(vm,"/sys/dict/del/" + id, {},function (resp) {
          var ret = resp.body;
          if (ret.code === '111') {
            vm.$notify({title: '删除提示', message: ret.msg, type: 'success'});
            vm.onSubmit();
          } else {
            vm.$message({type:'error', message: ret.msg});
          }
        });
      },
      deletetype(id){
        var vm = this;
        http.postData(vm,"/sys/dict/delType/" + id, {},function (resp) {
          var ret = resp.body;
          if (ret.code === '111') {
            vm.$notify({title: '删除提示', message: ret.msg, type: 'success'});
            vm.query();
          } else {
            vm.$message({type:'error', message: ret.msg});
          }
        });
      },
      query(){
        var vm=this;
        http.postData(vm,"/sys/dict/dictTypeList",{},function(resp){
          vm.dictTypeList=resp.body.value;
          if(vm.dictTypeList!=undefined&&vm.dictTypeList.length>0) {
            vm.form.dict_type_id = vm.dictTypeList[0].id;
            vm.dictTypeTitle = vm.dictTypeList[0].name;
            vm.onSubmit();
          }
        });
      },
      handleSizeChange () {
        this.form.pageNo = 1
        this.onSubmit()
      },
      handleCurrentChange (val) {
        this.form.pageNo = val
        this.onSubmit()
      }
    },
    components: {
      dictAddDialog,
      typeAddDialog
    },
    created() {
      var vm=this;
      vm.query();
    }
  }

</script>
<style>
</style>
